<template>
	<view class="container">
		<view class="title">
			<view class="title_top">实名认证</view>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">姓名</view>
					<input class="tui-input tui-text-right" placeholder="请输入您的姓名" placeholder-class="tui-phcolor" v-model="realName" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">身份证号码</view>
					<input class="tui-input tui-text-right" placeholder="请输入您的身份证号码" placeholder-class="tui-phcolor" v-model="idCard" />
				</view>
			</tui-list-cell>
		</view>

		<view class="main">
			<view class="main_top">上传身份证照片</view>
			<view class="idcode">
				<view class="just">
					<image class="cell-img" mode="" :src="tempFilePathsA" @click="chooseImageA"></image>
				</view>
				<view class="back">
					<image class="cell-img" :src="tempFilePathsB" @click="chooseImageB"></image>
				</view>
			</view>
		</view>

		<view class="bom">
			<view class="tit">拍摄身份证要求：</view>
			<view>
				<view class="beizhu">
					<view>大陆公民持有的本人有效二代身份证；</view>
					<view>拍摄时确保身份证 <text class="beizhud">边框完整，字体清晰，亮度均匀；</text></view>
				</view>

				<view class="image">
					<view class="image_img">
						<image class="image_img_one" src="../../static/img/idcode/certification_norm.png" mode=""></image>
						<image class="image_img_two" src="../../static/img/idcode/certification_norm_icox.png" mode=""></image>
						<text class="tit_img">标准</text>
					</view>
					<view class="image_img">
						<image class="image_img_one" src="../../static/img/idcode/certificationcy.png" mode=""></image>
						<image class="image_img_two" src="../../static/img/idcode/certification_error.png" mode=""></image>
						<text class="tit_img">边框缺失</text>
					</view>
					<view class="image_img">
						<image class="image_img_one" src="../../static/img/idcode/certification_vague.png" mode=""></image>
						<image class="image_img_two" src="../../static/img/idcode/certification_error.png" mode=""></image>
						<text class="tit_img">对焦模糊</text>
					</view>
					<view class="image_img">
						<image class="image_img_one" src="../../static/img/idcode/certification_glitter.png" mode=""></image>
						<image class="image_img_two" src="../../static/img/idcode/certification_error.png" mode=""></image>
						<text class="tit_img">闪光强烈</text>
					</view>

				</view>

			</view>
		</view>


		<view class="loginbtn" @click="checkId">
			<button>身份认证</button>
		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				realName: "",
				idCard: "",
				tempFilesA: [],
				tempFilesB: [],
				tempFilePathsA: "../../static/img/idcode/certification_opinion.png",
				tempFilePathsB: "../../static/img/idcode/certification_against.png",
				tempFilePaths:[],
			};
		},
		onLoad() {

		},

		methods: {
			chooseImageA() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认选择1张图片
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: (res) => {
						console.log(res); //成功则返回图片的信息
						// this.tempFilePathsA = res.tempFilePaths[0]
						this.tempFilesA = res.tempFiles[0]
						this.tempFilePaths.push(res.tempFilePaths[0])
						uni.showLoading({
						    title: '加载中',
							mask:true
						});
						
						
						uni.uploadFile({ 					//将本地资源上传到开发者服务器
							url: this.tui.interfaceUrl() + '/app/storage/upload', //接口地址
							filePath: res.tempFilePaths[0], 		//图片地址
							name: 'file',
							header: {
								'qianyantoken': uni.getStorageSync('token')
							},
							formData: {
								'file': res.tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								
								let urlImg = JSON.parse(uploadFileRes.data)
								
								this.tempFilePathsA = urlImg.data.url
							}
						});
						
					}
				});
			},
			chooseImageB() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认选择1张图片
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: (res) => {
						console.log(res); //成功则返回图片的信息
						// this.tempFilePathsB = res.tempFilePaths[0]
						this.tempFilesB = res.tempFiles[0]
						this.tempFilePaths.push(res.tempFilePaths[0])
						uni.showLoading({
						    title: '加载中',
							mask:true
						});
						
						uni.uploadFile({ 					//将本地资源上传到开发者服务器
							url: this.tui.interfaceUrl() + '/app/storage/upload', //接口地址
							filePath: res.tempFilePaths[0], 		//图片地址
							name: 'file',
							header: {
								'qianyantoken': uni.getStorageSync('token')
							},
							formData: {
								'file': res.tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								
								let urlImg = JSON.parse(uploadFileRes.data)
								
								this.tempFilePathsB = urlImg.data.url
							}
						});
						
						
					}
				});
			},

			checkId() {
				if (this.realName == "") {
					this.tui.toast("名字不能为空");
				} else if (this.idCard == "") {
					this.tui.toast("身份证不能为空");
				} else if (this.tempFilePathsA == "") {
					this.tui.toast("身份证正面不能为空");
				} else if (this.tempFilePathsB == "") {
					this.tui.toast("身份证反面不能为空");
				}
				let file = []
				file.push(this.tempFilePathsA)
				file.push(this.tempFilePathsB)
				console.log(file)
				this.tui.request('/app/user/uniCertification', 'POST', {
						realName: this.realName,
						idCard: this.idCard,
						file: file,
					},
					false,
					false,
					false,
				).then(res => {
					console.log(res);
					if(res.errno == 0){
						uni.reLaunch({
							url:"/pages/user/user"
						})
					}

				})
				
				// uni.uploadFile({
				// 	url: this.tui.interfaceUrl() + '/app/user/certification',
				// 	filePath: this.tempFilePathsA, 
				// 	name: 'file',
				// 	header: {
				// 		'qianyantoken': uni.getStorageSync('token')
				// 	},
				// 	formData: {
				// 		file: file,
				// 		realName:this.realName,
				// 		idCard:this.idCard,
				// 	},
				// 	success: (res) => {
				// 		console.log(res);
						
				// 	}
				// });
				
				
				// console.log(this.tempFilePaths)
				
				// let imgs = this.tempFilePaths.map((value, index) => {
				// 	return {
				// 		name: index,
				// 		url: value,
				// 	}
				// });
				
				
				// uni.uploadFile({
				// 	url: this.tui.interfaceUrl() + '/app/user/certification',
				// 	files: imgs,
				// 	header: {
				// 		'qianyantoken': uni.getStorageSync('token')
				// 	},
					
				// 	success: (res) => {
				// 		console.log(res);
						
				// 	}
				// });
				
				
				
			},
		}
	}
</script>

<style lang='scss'>
	@import '../../static/css/thorui.css';

	page {
		background: #FAFAFA;
	}

	.container {
		position: relative;


		.title {
			font-size: 32upx;
			color: #333333;
			padding: 0 20upx;
			background-color: #ffffff;

			.title_top {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10upx;
				padding-top: 20upx;
			}

			.title_name {
				padding-top: 10upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding-top: 10upx;
				padding-bottom: 10px;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
			}

			.title_code {
				padding-top: 10upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10px;
			}

		}

		.main {
			font-size: 32upx;
			color: #333333;
			padding: 0 20upx;
			margin-top: 20upx;
			background-color: #ffffff;

			.main_top {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10upx;
				padding-top: 20upx;
			}

			.idcode {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;
				padding-bottom: 30upx;

			}

			.cell-img {
				width: 160px;
				height: 120px;
			}
		}

		.bom {
			font-size: 32upx;
			color: #333333;
			padding: 0 20upx;
			margin-top: 20upx;
			background-color: #ffffff;
			padding-bottom: 20upx;

			.tit {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10upx;
				padding-top: 20upx;
			}


			.beizhu {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(145, 145, 145, 1);
				line-height: 32upx;


				.beizhud {
					color: #E73146;
				}

			}

			.image {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;


				.image_img {
					text-align: center;

					.image_img_one {
						width: 160upx;
						height: 100upx;

					}

					.image_img_two {
						width: 50upx;
						height: 50upx;
						display: block;
						text-align: center;
						margin: 0 auto;
						margin-top: -15px;
						z-index: 10;

					}

					.tit_img {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(145, 145, 145, 1);
						line-height: 32upx;
					}

				}


			}


		}
	}

	/* 按钮 */
	.loginbtn {
		display: block;
		width: 90%;
		margin: 0 auto;
		text-align: center;
		margin-top: 280upx;
	}

	.loginbtn button {
		text-align: center;
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #D14798;

	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}
</style>
